<template>
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      				<el-menu :default-active="$route.path" class="el-menu-vertical-demo"
					 unique-opened router>
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
    </el-aside>
</template>

<script>
    export default {
        name: 'leftMenu',
        data(){
            return{
                isCollpse: true
            }
        },
        methods: {
            handleOpen(key, keyPath) {
               // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
              //  console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .el-aside {
        color: #333;
    }
    a {
    text-decoration: none;
  }
</style>